import React, { memo } from 'react';
import PropTypes from 'prop-types';

const Counter = ({ count, increaseCounter, children }) => {
  console.log('Render: ', count);
  return (
    <span role="button" tabIndex="0" onClick={increaseCounter} onKeyDown={increaseCounter}>{`${children}${count}`}</span>
  );
};


Counter.defaultProps = {
  children: '',
};

Counter.propTypes = {
  count: PropTypes.number.isRequired,
  increaseCounter: PropTypes.func.isRequired,
  children: PropTypes.string,
};

export default memo(Counter);
